/*
 * Copyright 2019 ThoughtWorks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import "../../global/common";

$collapse-icon-size: 30px;
$icon-light-color: #e6e6e6;
$disabled-text-color: #999;

@mixin header-icon($type, $color) {
  @include icon-before($type: $type, $color: $color, $size: 25px) {
    text-align: center;
  }
  display: block;
}

.plugin-icon {
  display:        none;
  vertical-align: middle;
  margin:         0 15px 0 -15px;

  img {
    width:          $collapse-icon-size;
    height:         $collapse-icon-size;
    vertical-align: middle;
  }

  @media (min-width: $screen-md) {
    display: inline-block;
  }
}

.plugin-name {
  font-weight: 600;
  font-size:   13px;

  @media (min-width: $screen-md) {
    font-size: 12px;
  }
  @media (min-width: $screen-lg) {
    font-size: 15px;
  }

}

.cluster-profile-name {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.plugin-not-installed {
  margin-right: 15px;
  align-self:   center;
}

.key-value-pair {
  align-self: center;
}

.plugin-info-select {
  display: block;
}

.elastic-profile-modal-form-body {
  padding: 0 30px;
}

.table-cell {
  width:     263px;
  display:   block;
  word-wrap: break-word;
}

.job-settings-link {
  width:     121px;
  word-wrap: break-word;
  display:   block;
}

.disabled {
  opacity:        0.75;
  cursor:         not-allowed;
  pointer-events: none;

  &:hover {
    color:      $icon-color;
    background: $icon-bg;
  }

  a {
    color:          $disabled-text-color;
    cursor:         not-allowed;
    pointer-events: none;
  }
}

.note {
  color:           $disabled-text-color;
  font-size:       12px;
  display:         flex;
  justify-content: flex-end;
}

.spinner-wrapper {
  @include spinner-for-modal;
}

.cluster-profile-crud-actions {
  margin-left: 20px;
}

.cluster-profile-details-header {
  @include icon-before($type: $fa-var-angle-right, $size: 16px);
  position:     relative;
  padding-left: 17px;
  cursor:       pointer;
  margin:       0 0 20px 0;

  &:before {
    position:   absolute;
    left:       1px;
    top:        1px;
    margin:     0;
    transition: $transition;
  }

  &.expanded {
    &:before {
      transform:  rotate(90deg);
      transition: $transition;
      left:       3px;
      top:        2px;
    }
  }
}

.cluster-profile-details-container {
  display: block;
}

.cluster-profile-details {
  display: none;

  &.expanded {
    display: block;
  }
}

.add-icon {
  @include icon-before($type: $fa-var-plus);
}
